<template>
	<conf-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<p class="title font-20-bold">盒子版本管理</p>
		</template>

		<template #Slot-Conf-Module-Tools-Left>
			<div class="tools">
				<global-input-search
					v-model:value="tableAttr.searchObj.upPackageName"
					placeholder="升级包名称"
					@search="setTableData"
				></global-input-search>
				<a-select
					ref="select"
					v-model:value="tableAttr.searchObj.type"
					class="type-select"
					placeholder="固件/软件"
					style="width: 216px; margin-left: 8px"
					allow-clear
					@change="(type: any) => changetType(type)"
				>
					<a-select-option value="1">固件</a-select-option>
					<a-select-option value="2">软件</a-select-option>
				</a-select>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<a-button v-if="g6Permission.showBtn('upload')" type="primary" @click="PageButtonClick('upload')"> 上传 </a-button>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<global-table
					:data-source="tableAttr.data"
					:loading="tableAttr.loading"
					:columns="columns"
					:show-operation="true"
					:use-select="false"
					@sort="sort"
				>
					<template #type="{ record }">
						<div>
							{{ record.type === 1 ? '固件' : '软件' }}
						</div>
					</template>
					<template #operation="{ record }">
						<div class="operations">
							<div v-if="g6Permission.showBtn('details')" class="font-14 operation-item-btn" @click="PageButtonClick('details', record)">
								详情
							</div>

							<div
								v-if="g6Permission.showBtn('single-delete')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('single-delete', record)"
							>
								删除
							</div>
						</div>
					</template>
				</global-table>

				<global-pagination
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
	</conf-module-container>
</template>

<script setup lang="ts" name="box-versions-table">
import { g6Permission, g6StorageValue } from 'glasssix-utils-ts';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { BoxVersionManageApi } from '../../api';
import { ConfModuleContainer } from '../../components/index';

const $message: any = inject('$message');
const { setOpenDeleteModal } = useDeleteModal();
const { tableAttr, setTableData, setTablePagination } = g6UseTable(BoxVersionManageApi.list);

const router = useRouter();
const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'upPackageName', title: '升级包名称', width: 214, ellipsis: true },
	{ dataIndex: 'version', title: '版本号', width: 180, ellipsis: true },
	{ dataIndex: 'type', title: '类型', width: 108, custom: true, ellipsis: true },
	{ dataIndex: 'versionDescription', title: '版本描述', ellipsis: true },
	{ dataIndex: 'createdTime', title: '时间', width: 192, sorter: true, ellipsis: true }
];

// const typeSearch = (): void => {
// 	setTableData();
// };
const PageButtonClick = (btnCode: string, record: Record<string, any> = {}): void => {
	console.log('record', record);

	if (btnCode === 'upload') {
		router.push('/config-manage/box-versions/add');
	}
	if (btnCode === 'details') {
		router.push(
			`/config-manage/box-versions/detail?id=${record.id}&version=${record.version}&type=${record.type}&versionDescription=${record.versionDescription}`
		);
	}
	if (btnCode === 'single-delete') {
		const deleteFun = async (): Promise<void> => {
			let res: TsRes = await BoxVersionManageApi.delete([record.id]);
			if (res.code === 0) {
				tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
				tableAttr.total = tableAttr.total - 1;
				$message.success('删除成功');
			}
		};
		const deleteModalInfo = { title: '请确认是否删除', okText: '删除', cancelText: '取消' };
		setOpenDeleteModal(deleteFun, deleteModalInfo);
	}
};
// 排序
const sort = (val: any): void => {
	console.log('排序：', val);
	tableAttr.searchObj.timeSort = val.order;
	setTableData(true);
};
const changetType = (obj: number) => {
	setTableData(true);
	g6StorageValue.save('session', 'versionsType', obj);
	if (obj === undefined || obj === null) {
		g6StorageValue.delete('session', 'versionsType');
	}
};
onMounted(() => {
	tableAttr.searchObj.timeSort = 'desc';
	tableAttr.searchObj.type =
		g6StorageValue.get('session', 'noticesType') !== null ? String(g6StorageValue.get('session', 'noticesType')) : undefined;

	setTableData();
});
</script>

<style lang="less" scoped>
.title {
	color: rgba(240, 246, 252, 0.95);
}

.tools {
	display: flex;

	:deep(.ant-select) {
		.ant-select-selector {
			// height: 36px !important;
		}
	}
}

._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 160px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}
</style>
